<template>
  <el-dialog title="任务列表" width="1150px" :close-on-click-modal="false" :visible.sync="visible">
    <el-row :gutter="24" type="flex" class="header">
      <template v-if="marker.label === '路段'">
        <el-col :span="12" style="line-height:33px">
          <span>道路：</span>
          <span>{{ marker.name }}</span>
        </el-col>
      </template>
      <template v-else>
        <el-col :span="4" style="line-height:33px">
          <span>作业人：</span>
          <span>{{ marker.accountName }}</span>
        </el-col>
        <el-col :span="4" style="line-height:33px">
          <span>联系方式：</span>
          <span>{{ marker.accountPhone }}</span>
        </el-col>
        <el-col :span="4" style="line-height:33px">
          <span>车牌：</span>
          <span>{{ marker.carPlatenumber }}</span>
        </el-col>
      </template>
      <el-col :span="12">
        <div class="search-box">
          <table-search
            ref="searchRef"
            :search-form="taskListSearchForm"
            :on-submit="handleSearch"
            :hide-reset="true"
            :card-wrap="false"
          />
          <a v-if="marker.label === '作业人' || marker.label === '作业车辆'" @click="handleRoute">查看轨迹</a>
        </div>
      </el-col>
    </el-row>
    <table-paging
      max-height="500px"
      :table-list="tableData"
      :table-column="taskListColumn"
    />
    <task-watch-locus ref="TaskWatchLocusRef" :type="locusData.type" :path="locusData.path" />
  </el-dialog>
</template>

<script>
import TablePaging from '@/components/TablePaging'
import TableSearch from '@/components/TableSearch'
import TaskWatchLocus from '../task_watch_locus'
import { taskListColumn, taskListSearchForm } from './config'
import { fetchMonitorCarList, fetchMonitorUserList, fetchMonitorPartList, fetchMonitorTrailList } from '@/api/sanitation/monitoring'

export default {
  components: { TablePaging, TableSearch, TaskWatchLocus },
  props: {
    queryType: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      marker: {},
      queryData: {},
      taskListColumn,
      taskListSearchForm,
      tableData: [],
      locusData: {}, // 轨迹数据
      visible: false
    }
  },
  methods: {
    open(marker) {
      this.$data.marker = marker
      this.$data.visible = true

      this.postTaskList()
    },
    getRequest() {
      if (this.$data.marker.label === '作业车辆') {
        return fetchMonitorCarList
      }
      if (this.$data.marker.label === '作业人') {
        return fetchMonitorUserList
      }
      if (this.$data.marker.label === '路段') {
        return fetchMonitorPartList
      }
    },
    postTaskList() {
      const params = {
        id: this.$data.marker.bindId,
        ...this.$data.queryData
      }
      const request = this.getRequest()
      request(params).then(res => {
        this.$data.tableData = res
      })
    },
    postRouteData(date) {
      // 类型 1人员，2车辆
      const type = this.$data.marker.label === '作业人' ? 1 : 2
      const params = {
        id: this.$data.marker.bindId,
        type,
        ...date
      }
      fetchMonitorTrailList(params).then(res => {
        if (!res || !res.length) {
          this.$message('暂无轨迹')
          return
        }
        this.$data.locusData = { type, path: res }

        this.$refs.TaskWatchLocusRef.open()
      })
    },
    handleSearch(formData) {
      this.$data.queryData = formData
      this.postTaskList()
    },
    handleRoute() {
      const date = this.$refs.searchRef.getFormData()
      if (!date.beginDate || !date.endDate) {
        this.$message('请选择日期', { type: 'error' })
        return
      }
      this.postRouteData(date)
    }
  }
}
</script>

<style lang="scss" scoped>
    .header {
      align-items: center;
    }
    .search-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .table-search{
        margin-bottom: 0;
        margin-right: 10px;
      }

      a{
        color: #7474ff;
      }
    }
</style>
